<% title(t("views.articles.lock.meta.title")) %>
<main id="main-content" class="crayons-layout crayons-layout--limited-l gap-0">
  <div class="crayons-card crayons-card--secondary text-styles text-styles--secondary text-padding -mb-1 mx-3 m:mx-6 mt-3">
    <%= @article.title %>
  </div>
  <div class="crayons-card text-padding">
    <h1 class="crayons-subtitle-1 mb-2"><%= t("views.articles.lock.heading") %></h1>
    <p class="fs-l mb-4">
      <%= t("views.articles.lock.desc_html") %>
    </p>

    <%= form_for @discussion_lock, method: :post do |f| %>
      <div class="crayons-field">
        <%= f.hidden_field :article_id, value: @article.id %>
        <div class="crayons-field mb-5">
          <%= f.label :reason, t("views.articles.lock.reason.label"), class: "crayons-field__label" %>
          <%= f.text_field :reason,
                           placeholder: t("views.articles.lock.reason.placeholder"),
                           required: false,
                           class: "crayons-textfield" %>
        <div class="crayons-field">
          <%= f.label :notes, t("views.articles.lock.notes.label"), class: "crayons-field__label" %>
          <%= f.text_field :notes,
                           placeholder: t("views.articles.lock.notes.placeholder"),
                           required: false,
                           class: "crayons-textfield" %>
        </div>
      </div>
      <div>
        <%= f.submit t("views.articles.lock.submit"), class: "crayons-btn crayons-btn--danger" %>
        <a data-no-instant href="<%= dashboard_path %>" class="crayons-btn crayons-btn--ghost"><%= t("views.articles.lock.cancel") %></a>
      </div>
    <% end %>
  </div>
</main>
